<!-- 文件上传（图片、视频） -->
<template>
	<view class="upload-file-page">
		<!-- 图片上传 -->
		<block v-if="fileType == 'image'">
			<view class="upload-files">
				<view v-for="(item,index) in imgList" :key="index" class="upload-file">
					<image :src="item" :data-src="item" @tap="previewImage($event,imgList)"></image>
					<uni-icons type="closeempty" class="icon-cuo" @tap="delectFile(index)"></uni-icons>
				</view>
				<view class="upload-file-border" @click="uploadFile()">
					<image src="/static/images/icons/icon_upload_img.svg" mode=""></image>
				</view>
			</view>
		</block>
		<!-- 头像上传 -->
		<template v-if="fileType == 'faces'">
			<view class="faces">
				<view class="faces-img">
					<image :src="imgList ? imgList[0] : facesSrc" mode="" @click="uploadFile()"></image>
				</view>
				<image src="/static/images/jinru.png" mode="" @click="uploadFile()"></image>
			</view>
		</template>
		<!-- 视频上传 -->
		<block v-if="fileType == 'video'">
			<view class="upload-files">
				<view v-for="(item,index) in videoSrc" :key="index" class="upload-file">
					<uni-icons type="closeempty" class="icon-cuo" @tap="delectFile(videoSrc,index)"></uni-icons>
					<video :src="item" id="myVideo" class="video" @play="playVedio()" object-fit="fill"></video>
				</view>
				<view class="upload-file-border" @click="uploadFile(videoSrc)">
					<image src="/static/images/icons/icon_upload_img.svg" mode=""></image>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'uploadFile',
		props: {
			fileType: { //上传文件类型
				type: String,
				default: 'image'
			},
			imgList: { //图片路径
				type: Array,
				default: () => []
			},
			videoSrc: { //视频路径
				type: Array,
				default: () => []
			},
			data() {
				return {
					facesSrc: "/static/images/icons/icon_yuangong.svg", //表单中展示默认头像
				}
			}
		},
		methods: {
			/* 上传文件时向父组件传值 */
			uploadFile() {
				let that = this;
				if (that.fileType == 'image') {
					uni.chooseImage({
						success(res) {
							that.$emit('getFiles', res.tempFilePaths);
						}
					})
				} else if (that.fileType == 'faces') {
					uni.chooseImage({
						count: 1,
						success(res) {
							that.$emit('getFiles', res.tempFilePaths);
						}
					})
				} else if (that.fileType == 'video') {
					uni.chooseVideo({
						success: function(res) {
							that.$emit('getFiles', res.tempFilePath);
						}
					});
				}
			},

			/* 点击预览图片 */
			previewImage: function(e, imgList) {
				let current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: imgList
				})
			},

			/* 点击视频播放后执行事件 */
			playVedio() {
				// 获取 video 上下文 videoContext 对象
				this.videoContext = uni.createVideoContext('myVideo', this);
				// 进入全屏状态
				this.videoContext.requestFullScreen();
			},

			/* 删除前端要上传的文件 */
			delectFile(fileIndex) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该文件?",
					success: (res) => {
						if (res.confirm) {
							this.$emit('delectFile', fileIndex);
						}
					}
				})
			},
		}
	}
</script>

<style>
	.upload-files {
		display: flex;
		flex-wrap: wrap;
	}

	.upload-file {
		position: relative;
		z-index: 1;
		margin-right: 20rpx;
	}

	.upload-file>image,
	.upload-file>video {
		width: 200rpx;
		height: 200rpx;
		margin-top: 10rpx;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		top: 10rpx;
		background: linear-gradient(90deg, rgba(251, 91, 80, 1) 0%, rgba(240, 45, 51, 1) 100%);
		color: #FFFFFF;
		z-index: 999;
	}

	.upload-file-border {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 200rpx;
		border: 1px solid #acacac;
		background-color: #eaeaea;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.upload-file-border image {
		width: 60rpx;
		height: 60rpx;
	}

	.faces {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.faces-img {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 160rpx;
		border: 1px solid #b6b6b6;
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.faces-img+image {
		width: 40rpx;
		height: 40rpx;
	}

	.faces-img image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
</style>
